<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>props 函数式组件限制属性值的类型</title>
    </head>
    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>
        <!-- 1. 引入 prop 文件 -->
        <script src="../js/prop-types.js"></script>

        <script type="text/babel">
            //声明数据
            let obj = {
                name: "园园",
                age: 18,
                gender: "女",
            };
            let obj2 = {
                name: "伟超",
                gender: "男",
            };

            //函数式组件声明
            function Person(props) {
                return (
                    <ul>
                        <li>姓名: {props.name}</li>
                        <li>年龄: {props.age}</li>
                        <li>性别: {props.gender}</li>
                    </ul>
                );
            }

            //设置静态属性
            Person.propTypes = {
                age: PropTypes.number.isRequired
            }

            Person.defaultProps = {
                age: 19
            }

            //渲染
            ReactDOM.render(
                <div>
                    <Person name={obj.name} age={obj.age} gender={obj.gender} />
                    <Person {...obj2} />
                </div>,
                document.querySelector("#root")
            );
        </script>
    </body>
</html>
